<template>
  <view class="x-tabbar x-flex-row-around-center">
    <view class="tabbarItem x-flex-column-center" v-for="(item,index) in tabbarList" :key="item.text">
      <view class="top">
        <image class="image" v-if="currentIndex == index" :src="selectedIconPath" mode=""></image>
        <image class="image" v-else :src="iconPath" mode=""></image>
      </view>
      <view class="text">{{item.text}}</view>
    </view>
  </view>
</template>

<script setup>
import config from '@/js/config.js';
defineProps({
  currentIndex: {
    type: Number,
    default: 0
  }
})

import {
  reactive
} from "vue";

const tabbarList = reactive([{
  "pagePath": "/pages/index/index",
  "text": "首页",
  "iconPath": "https://ps.ssl.qhimg.com/t011e0c463bc709f337.jpg",
  // "selectedIconPath": config.imgPath + "/tabbar/tabbar_home1.png",
  // https://ps.ssl.qhimg.com/t011e0c463bc709f337.jpg
  "selectedIconPath": "https://ps.ssl.qhimg.com/t011e0c463bc709f337.jpg",
},
{
  "pagePath": "/pages/index/entruct",
  "text": "委托",
  "iconPath": config.imgPath + "/tabbar/jx.png",
  "selectedIconPath": config.imgPath + "/tabbar/jx1.png"
},
{
  "pagePath": "/pages/index/chat",
  "text": "信息",
  "iconPath": config.imgPath + "/tabbar/zl.png",
  "selectedIconPath": config.imgPath + "/tabbar/zl1.png"
},
{
  "pagePath": "/pages/index/mine",
  "text": "我的",
  "iconPath": config.imgPath + "/tabbar/my.png",
  "selectedIconPath": config.imgPath + "/tabbar/my1.png"
}
])
</script>

<style lang="scss">
.x-tabbar {
  width: 100vw;
  height: 100rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-top: solid 1px rgba(51, 51, 51, 0.06);

  .tabbarItem {
    flex: 1;
  }

  .image {
    width: 52rpx;
    height: 52rpx;
  }
}
</style>